<template lang="pug">
    sbpro-layout-default(
        footerClasses='bg-cse footer-dark'
    )

        sbpro-top-nav(
            topNavClasses='bg-cse navbar-dark fixed-top',
            brandClasses='text-white',
            buttonClasses='btn-teal'
        )

        sbpro-page-header(
            headerClasses='bg-img-cover overlay overlay-70 page-header-dark',
            borderType='rounded',
            borderClasses='text-light',
            backgroundImage='url("/assets/img/banners/carousel2.jpg")',
        )
            .page-header-content
                .container.text-center
                    .row.justify-content-center
                        .col-lg-8
                            h1.page-header-title 最新消息
                            //p.page-header-text.mb-0 Search results for keywords '{{keywords}}'

        sbpro-page-section(
            id='contentSection'
            sectionClasses='py-5 bg-light',
            borderType='rounded',
            borderClasses='text-cse'
        )
            .container-fluid
                .col-lg-10.mx-auto
                    .px-2
                        h1.mt-2 最新消息
                        p.lead 最近更新: {{sliceDate(recentUpdate)}}
                    hr.my-3

                    //搜索结果列表
                    template(v-for="post in postList")
                        media-list-item(
                            :articleUrl="'/post/' + post.pid"
                            :imgUrl="post.imgUrl"
                            :head="post.title"
                            :intro="post.desc"
                            :date="sliceDate(post.datetime)"
                            :views="post.views"
                            img-position="left"
                        )
                        hr.my-0

                    //boostrap分页器
                    b-pagination.pagination-blog.my-5.pt-lg-1(
                        v-model="currentPage"
                        :total-rows="rows"
                        :per-page="perPage"
                        align="center"
                        pills
                    )

</template>

<script>
import SBProTopNav from '@structural/top-nav.vue';
import SBProPageHeader from '@structural/page-header.vue';
import SBProLayoutDefault from '@structural/layout-default.vue';
import SBProPageSection from '@structural/page-section.vue';
import MediaListItem from '../../media_layout/media-list-item';
import { getLatestPosts } from '../../../api/category';
import { activatedFlag } from '../../../utils/mixin';

export default {
    name: 'Latest',
    mixins: [activatedFlag],
    components: {
        MediaListItem,
        'sbpro-top-nav': SBProTopNav,
        'sbpro-page-header': SBProPageHeader,
        'sbpro-layout-default': SBProLayoutDefault,
        'sbpro-page-section': SBProPageSection,
    },
    computed: {
        queryPage: {
            get() {
                return this.$route.query.page;
            },
            set(val) {
                // 页面激活时再修改参数
                if (this.activatedFlag) {
                    this.routeSetPage(val);
                    return val;
                }
                return this.queryPage;
            },
        },
        currentPage: {
            get() {
                return parseInt(this.queryPage) || 1;
            },
            set(val) {
                this.queryPage = val;
            },
        },
    },
    methods: {
        sliceDate(datetime) {
            return datetime.split(' ')[0];
        },
        changeCurrentPage() {
            getLatestPosts(this.perPage, this.currentPage).then(
                ({ postList, pageInfo, recentUpdate }) => {
                    this.postList = postList;
                    this.rows = pageInfo.rows;
                    this.recentUpdate = recentUpdate;
                    window.scrollTo(0, 0);
                }
            );
        },
        //跳转路由 至指定页数,
        routeSetPage(page) {
            this.$router
                .push({
                    name: 'Latest',
                    query: { page: page },
                })
                .catch(err => err);
        },
    },
    data() {
        return {
            rows: 0,
            perPage: 8,
            recentUpdate: '2020-08-08 12:26',
            postList: [],
            hasChanged: false,
        };
    },
    created() {
        //如果不存在页数参数则添加上
        if (!this.queryPage) {
            this.routeSetPage(1);
        }
        //拉取数据
        this.changeCurrentPage();
    },
    activated() {
        this.changeCurrentPage();
    },
    watch: {
        //页面激活时再进行监听
        currentPage: function() {
            if (this.activatedFlag) {
                this.changeCurrentPage();
            }
        },
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.post-archive-tag {
    text-transform: none;
}
@include media-breakpoint-down(xs) {
    .col-lg-10 {
        padding: 0;
    }
}
</style>
